<template>
  <div id="staffInfo">
    <h1 class="con-right-title">
      员工信息
    </h1>
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button
        type="success"
        icon="el-icon-plus"
        @click="handleComplain"
        v-permission="'wh:share:reflux:userAdd'"
      >
        从人事档案系统新增
      </el-button>
      <el-button
        type="warning"
        icon="el-icon-upload2"
        @click="handleImport"
        v-permission="'wh:share:importUser'"
      >
        批量导入
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      ref="table"
    >
      <el-table-column type="index" label="序号" width="100">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="员工姓名"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="employeeNumber"
        label="员工工号"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="mobilePhone"
        label="员工手机号"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <!-- <el-table-column prop="qq" label="QQ" min-width="100" align="center">
      </el-table-column> -->
      <el-table-column
        prop="jobs"
        label="员工职位"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <!-- <el-table-column
        prop="createdDate"
        label="员工部门"
        min-width="100"
        align="center"
      >
      </el-table-column> -->
      <el-table-column
        prop="lastModifiedDate"
        label="最后更新时间"
        min-width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" min-width="100" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleDelete(scope.row)"
            v-permission="'wh:share:reflux:delete'"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 添加\编辑学院弹窗 -->
    <handleDialog
      v-if="handleDialogData.isShow"
      :handle-dialog-data="handleDialogData"
      @refreshList="refreshList"
    ></handleDialog>
    <importDialog
      v-if="importDialogData.isShow"
      :dialog-data="importDialogData"
      @refresh="refreshList"
      @showError="showError"
    ></importDialog>
    <!-- 导入失败弹窗 -->
    <errorDialog
      v-if="errorDialogData.isShow"
      :dialog-data="errorDialogData"
      :from="userInfo"
      params="user"
    ></errorDialog>
  </div>
</template>
<script>
import { filterImageMixins } from '@/mixins/filterImage'
import { saveScrollMixins } from '@/mixins/saveScroll'
import { userInfo, deleteInfo } from '@/api/userInfo'
import { exportMb, userImport } from '@/api/userInfo' //导入 下载模板的接口
import topSearch from '@component/staffInfo/topSearch' // 上部搜索条件
import handleDialog from '@component/staffInfo/handleDialog'
import importDialog from '@common/importDialog' // 导入弹窗
import errorDialog from '@common/errorDialog' // 导入失败弹窗

export default {
  name: 'info',
  msg: '员工信息',
  mixins: [filterImageMixins, saveScrollMixins],
  components: {
    handleDialog,
    topSearch,
    importDialog,
    errorDialog
  },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      handleDialogData: {
        isShow: false
      },
      importDialogData: {
        title: '',
        isShow: false, // 控制弹框显示
        params: 'isUseAppUrl'
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      },
      formInline: {
        // keyword: ''
        condition: ''
      }
    }
  },
  mounted() {
    this.searchList()
  },
  methods: {
    // 导入
    handleImport() {
      this.importDialogData.url = userImport() // 导入接口
      this.importDialogData.downUrl = exportMb() // 下载模板接口
      this.importDialogData.isShow = true // 显示导入弹框
      this.importDialogData.title = '批量导入'
    },
    /* 导入失败弹窗 */
    showError(text, one) {
      this.errorDialogData.isShow = true
      // 显示导入失败弹框
      if (one.code == 409) {
        this.errorDialogData.warningText = text.message
      } else {
        this.errorDialogData.warningText = text // 显示导入失败弹框
      }
    },
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let params = { ...this.searchParams, ...this.formInline }
      userInfo(
        params,
        (res) => {
          this.loading = false
          this.total = res.total
          this.tableData = res.rows
        },
        (err) => {
          this.loading = false
          this.$message({
            message: err.message,
            type: 'warning'
          })
        }
      )
    },
    // 新增
    handleComplain() {
      this.handleDialogData.isShow = true
    },
    // 删除
    handleDelete(row) {
      var _this = this
      this.$confirm('确定删除该条员工信息吗？', '删除提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then((rs) => {
          let id = row.id
          let params = {}
          deleteInfo(
            id,
            params,
            (res) => {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              _this.searchList()
            },
            (err) => {
              this.$message({
                message: err.message,
                type: 'warning'
              })
            }
          )
        })
        .catch((action) => {
          if (action === 'cancel') {
            console.log('取消')
          }
        })
    },
    refreshList() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#staffInfo {
  .img-box {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;

    .img-inner-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      text-align: center;

      .el-image {
        width: 100%;
        height: 100%;
      }

      img {
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
      }
    }

    .num {
      position: absolute;
      display: block;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 16px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 16px;
    }
  }
}
</style>
